<template>
	<view class="wap">
		<view class="form-item">
			<textarea class="textarea" maxlength="140" name="content" v-model="content" placeholder="请描述您的问题和建议">
			</textarea>
		</view>
		<view class="form-item border-bottom">
			<view class="image-area flex-y-center">
				<view class="image-item" v-for="(item,index) in totalImg" :key='index'>
					<image src="@/static/img/close-ico.png" class="delete-icon" @click='deleteImg(index)'></image>
					<image class="feedback-img" :src="item" mode="aspectFill"  @click="previewImage(index)">
					</image>
				</view>
				<view class="image-item" id='fileUploadBtn' @click="chooseImgs()" v-show="totalImg.length < 9">
					<image class="add-icon" src="@/static/img/upload-ico.png">
					</image>
				</view>
			</view>
		</view>
		<view class="form-item border-bottom">
			<view class="form-title">
				<text>联系方式</text>
			</view>
			<view class="form-input">
				<input maxlength="11" type="digit" name="mobile" v-model="mobile" placeholder="请留下您的联系方式">
				</input>
			</view>
		</view>
		<view class="form-item" @click="backSubmit()">
			<view class="btn">
				<text>提交</text>
			</view>
		</view>

	</view>
</template>

<script>
	import {feedbackSubmit} from '../../apirequest/api.js';
	import {baseUrl} from '../../apirequest/config.js'
	export default {
		data() {
			return {
				totalImg:[],
				content:'',
				mobile:'',
				lock:0,
			}
		},
		methods: {
			// 选择图片
			chooseImgs: function() {
				var _this = this
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'], //从相册选择
					success: (res) => {
						/* console.log("tempFilePaths")
						console.log(res) */
						const tempFilePaths = res.tempFilePaths
						for (var i = 0; i < tempFilePaths.length; i++) {
							_this.totalImg.push(tempFilePaths[i]);
							console.log("tempFilePaths" + tempFilePaths[i])
						}

					}
				})
			},
			//图片预览
			previewImage: function(index) {
				var _this = this
				//所有图片
				var imgbox = _this.totalImg;
				uni.previewImage({
					//当前显示图片
					current: imgbox[index],
					//所有图片
					urls: imgbox
				})
			},
			deleteImg:function(index){
			    var _this = this
			    _this.totalImg.splice(index,1)
			},
			backSubmit:function(){
			    var e = this;
			    if(e.lock)return;
			    let adds = {
				  content:e.content,
			      mobile:e.mobile,
				  images:'',
				  type:'suggest'
			    } 
				if (!e.content) {
				  uni.showToast({
				    title: '请描述您的问题和建议',
				    icon:'error'
				  })
				  return false;
				}
			    if (!adds.mobile) {
			      uni.showToast({
			        title: '请填写联系方式',
			        icon:'error'
			      })
			      return false;
			    }
			    console.log(adds);
			    var _submit = function (data) {
			          feedbackSubmit(adds).then((res) => {
						if(res.code == 1){
							uni.showToast({
								title:res.msg,
								icon:"success"
							});
							setTimeout(function(){
								uni.navigateBack({
									delta:0
								});
							 },1000);
						} else{
							uni.showToast({
								title:res.msg,
								icon:"error"
							});
							e.lock = 0;
						}
			          }).catch(err => {
			          	 console.log(err)
			          })
			    };
			    let index = 0;
			    let img_num = e.totalImg.length
			    let imgs = []
			    var upload_image = function(filePath,img_arr){
			      uni.showLoading({
			        title: "正在上传图片",
			        mask: !0
			      }),uni.uploadFile({
			        url: baseUrl + 'common/upload',
			        filePath:filePath,
			        name: 'file',
			        header:{
			          //'content-type': 'multipart/form-data',
			          "token" : uni.getStorageSync('token')
			        },
			        success:function(data){
			            console.log(data)
			            uni.hideLoading({
			              complete: (res) => {},
			            }) 
			            var img_res = JSON.parse(data.data)
			            console.log(img_res)
			            if(img_res.code == 1){
			              img_arr.push(img_res.data.url);
			              index++;
			              console.log(index+'----'+img_num)
			              if (index==img_num) {
			                adds.images = imgs.join(",");
			                console.log(adds);
			                _submit(adds)
			              }
			            } else {
						  e.lock = 0;
			              uni.showToast({
			                title: img_res.msg,
			                icon:'none'
			              });
			            }
			          }
			      })
			    }
			    if (!img_num) {
					 e.lock = 1;
			        _submit(adds);
			    } else {
			      if (e.totalImg.length) {
				    e.lock = 1;
					console.log(e.totalImg)
			        for (var i = 0; i < img_num; i++) {
						console.log(i)
						console.log(e.totalImg[i])
			            upload_image(e.totalImg[i],imgs);
			        }
			      }
			    }
			  },
		}
	}
</script>

<style>
	page {
		background: #fff;
	}

	.wap {
		display: flex;
		flex-flow: column;
		padding: 9px 14px;
		font-size: 28rpx;
	}

	.wap .form-item {
		margin-bottom: 28px
	}

	.wap .form-item .textarea {
		width: 100%;
		height: 48px
	}

	.wap .form-item .form-title {
		margin-bottom: 28px
	}

	.wap .form-item .form-input {
		margin-bottom: 19px
	}

	.wap .form-item .image-area {
		display: flex;
		align-items: center;
		margin-bottom: 19px;
		flex-wrap: wrap;
	}

	.wap .form-item .image-area .image-item {
		width: 86px;
		height: 86px;
		background-color: #f4f5f7;
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 14px;
		position: relative;
		margin-bottom: 10rpx;
	}

	.wap .form-item .image-area .image-item .delete-icon {
		position: absolute;
		top: -7px;
		right: -7px;
		width: 19px;
		height: 19px
	}

	.wap .form-item .image-area .image-item .feedback-img {
		width: 100%;
		height: 100%;
		border-radius: 20px
	}

	.wap .form-item .image-area .image-item .add-icon {
		width: 26px;
		height: 26px
	}

	.wap .form-item .btn {
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to right, #ffae31, #fe771d);
		border-radius: 51px;
		width: 100%;
		color: #fff;
    font-size: 28rpx;
    height: 80rpx;
	}

	.border-bottom {
		border-bottom: 1px solid #f4f5f7;
	}
</style>
